import React, { FC, useState } from 'react'
import styles from './List.module.scss'
import QuestionCard from '../../components/QuestionCard'
import { useSearchParams } from 'react-router-dom'

const rawQuestions = [
  {
    id: 'q1',
    title: 'Question 1',
    isPublished: true,
    isStar: false,
    answerCount: 10,
    createdAt: '2024-01-01',
  },
  {
    id: 'q2',
    title: 'Question 2',
    isPublished: false,
    isStar: false,
    answerCount: 10,
    createdAt: '2024-01-01',
  },
  {
    id: 'q3',
    title: 'Question 3',
    isPublished: false,
    isStar: false,
    answerCount: 10,
    createdAt: '2024-01-01',
  },
  {
    id: 'q4',
    title: 'Question 4',
    isPublished: false,
    isStar: false,
    answerCount: 10,
    createdAt: '2024-01-01',
  },
]

const List: FC = () => {
  const [searchParams] = useSearchParams()
  const keyword = searchParams.get('keyword') || ''
  console.log('keyword:', keyword)
  // eslint-disable-next-line no-unused-vars
  const [list, _setList] = useState(rawQuestions)
  return (
    <>
      <div className={styles.header}>
        <div className={styles.left}>
          <h3>我的问卷</h3>
        </div>
        <div className={styles.right}>搜索</div>
      </div>
      <div className={styles.content}>
        {list.map((q) => (
          <QuestionCard key={q.id} {...q} />
        ))}
      </div>
      <div className={styles.footer}>footer</div>
    </>
  )
}

export default List
